<template>
  <view class="wait-order-container">
    <!-- 头部导航 -->
    <view class="custom-navbar">
      <view class="navbar-left">
        <!-- <u-icon
          name="arrow-left"
          size="22"
          color="#FFFFFF"
          @click="goBack"
        ></u-icon> -->
      </view>
      <view class="navbar-title">推送列表</view>
      <view class="navbar-right">
        <u-icon
          name="more-dot-fill"
          size="24"
          color="#FFFFFF"
          @click="showActionSheet"></u-icon>
      </view>
    </view>

    <!-- 下拉菜单 -->
    <view class="dropdown-menu" v-if="showDropdown">
      <view class="dropdown-item" @click="goToChangePassword">修改密码</view>
      <view class="dropdown-item" @click="logout">退出登录</view>
    </view>

    <!-- 选项卡切换 -->
    <view class="tabs-box">
      <u-tabs
        :list="tabsList"
        :current="tabsCurrent"
        @change="tabsChange"
        activeStyle="font-weight: 600;color: #2979ff;"
        inactiveStyle="font-weight: 400;color: #333;"
        lineWidth="60"
        lineHeight="3"
        itemStyle="height: 50px;"
        :scrollable="false"></u-tabs>
    </view>

    <!-- 订单列表 -->
    <z-paging
      ref="paging"
      v-model="list"
      @query="queryList"
      :fixed="false"
      :auto-height="isPlatformMP"
      :style="pagingStyle">
      <template #empty>暂无数据</template>
      <view class="order-list">
        <view
          class="order-item"
          v-if="tabsCurrent === 0"
          v-for="(item, index) in list"
          :key="index">
          <view class="item-header">
            <view class="order-time">
              <u-icon name="clock-fill" size="16" color="#909399"></u-icon>
              <text>{{ item.c_date }}</text>
            </view>
            <view class="order-status">未处理</view>
            <!-- {{item.state}} -->
          </view>

          <view class="customer-info">
            <view class="customer-name">{{ item.name }}</view>

            <view class="info-item">
              <u-icon name="phone-fill" size="16" color="#909399"></u-icon>
              <text>电话：{{ item.mobile }}</text>
            </view>

            <view class="info-item">
              <u-icon name="map-fill" size="16" color="#909399"></u-icon>
              <text>地址：{{ item.address }}</text>
            </view>

            <view class="info-item">
              <u-icon name="edit-pen-fill" size="16" color="#909399"></u-icon>
              <text>备注：{{ item.remark }}</text>
            </view>
          </view>

          <view class="order-action">
            <view class="action-btn" @click="acceptOrder(item)">
              <text>处理 »</text>
            </view>
          </view>
        </view>

        <view
          class="order-item"
          v-if="tabsCurrent === 1"
          v-for="(item, index) in list"
          :key="index">
          <view class="item-header">
            <view class="order-time">
              <u-icon name="clock-fill" size="16" color="#909399"></u-icon>
              <text>{{ item.c_date }}</text>
            </view>
            <view class="order-status">已处理</view>
            <!-- {{item.state}} -->
          </view>

          <view class="customer-info">
            <view class="customer-name">{{ item.name }}</view>

            <view class="info-item">
              <u-icon name="phone-fill" size="16" color="#909399"></u-icon>
              <text>电话：{{ item.mobile }}</text>
            </view>

            <view class="info-item">
              <u-icon name="map-fill" size="16" color="#909399"></u-icon>
              <text>地址：{{ item.address }}</text>
            </view>

            <view class="info-item">
              <u-icon name="edit-pen-fill" size="16" color="#909399"></u-icon>
              <text>备注：{{ item.remark }}</text>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    
    <!-- 自定义弹窗 -->
    <view class="custom-modal" v-if="showModal" @click.stop="closeModalByMask">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">处理</text>
        </view>
        
        <view class="modal-body">
          <!-- 状态选择 -->
          <view class="form-group">
            <text class="form-label">选择</text>
            <view class="status-options">
              <view 
                class="status-option" 
                :class="{ active: orderStatus === 0 }"
                @click="selectStatus(0)"
              >
                <view class="radio-circle">
                  <view class="radio-dot" v-if="orderStatus === 0"></view>
                </view>
                <text class="status-text">未处理</text>
              </view>
              <view 
                class="status-option" 
                :class="{ active: orderStatus === 1 }"
                @click="selectStatus(1)"
              >
                <view class="radio-circle">
                  <view class="radio-dot" v-if="orderStatus === 1"></view>
                </view>
                <text class="status-text">已处理</text>
              </view>
            </view>
          </view>
          
          <!-- 备注输入 -->
          <view class="form-group">
            <text class="form-label">备注信息</text>
            <textarea 
              class="remark-input"
              v-model="remark"
              placeholder="请输入备注信息..."
              maxlength="200"
              :show-confirm-bar="false"
            ></textarea>
            <text class="char-count">{{ remark.length }}/200</text>
          </view>
        </view>
        
        <view class="modal-footer">
          <view class="btn cancel-btn" @click="closeModal">取消</view>
          <view class="btn confirm-btn" @click="confirmHandle">确认处理</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getlogout } from "@/api/gent.js";

export default {
  data() {
    return {
      tabsList: [
        {
          name: "未处理",
        },
        {
          name: "已处理",
        },
      ],
      tabsCurrent: 0,
      showDropdown: false,
      list: [],
      isPlatformMP: false, // 是否是小程序平台
      pagingStyle: {},
      // 弹窗相关
      showModal: false,
      currentOrder: null,
      orderStatus: 1, // 默认已处理
      remark: '',
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad() {
    // 判断当前平台
    // #ifdef MP
    this.isPlatformMP = true;
    this.pagingStyle = {
      width: "100%",
      marginTop: "165px",
    };
    // #endif

    // #ifdef H5
    this.isPlatformMP = false;
    this.pagingStyle = {
      width: "100%",
      height: "80vh",
    };
    // #endif
  },
  mounted() {
    this.getopen();
    this.queryList(1, 10);
  },
  methods: {
    getopen() {
      this.$Api.user
        .getwxlogin({
          code: this.getUrlParameter("code"),
        })
        .then((res) => {
          console.log(res, "ASdfasd");
          if (res.response.statusCode === 200) {
            // if (res.data.data.data.length != 0) {
            //   this.$refs.paging.complete(res.data.data.data);
            // } else {
            //   this.$refs.paging.complete(false);
            // }
          }
        });
    },
    getUrlParameter(name) {
      // const urlParams = new URLSearchParams(window.location.search);
      // return urlParams.get(name);

      const url = window.location.href;
      // 匹配 #/?code=xxx 或 ?code=xxx（兼容不同路由模式）
      const regex = /[#&?]code=([^&]+)/;
      const match = url.match(regex);
      return match ? match[1] : null;
    },
    queryList(pageNo, pageSize) {
      this.$Api.user
        .getOrderList({
          state: this.tabsCurrent,
          page: pageNo,
          size: pageSize,
        })
        .then((res) => {
          if (res.response.statusCode === 200) {
            if (res.data.data.data.length != 0) {
              this.$refs.paging.complete(res.data.data.data);
            } else {
              this.$refs.paging.complete(false);
            }
          }
        });
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 选项卡切换
    tabsChange(e) {
      // 正确接收 change 事件传递的参数对象
      this.tabsCurrent = e.index;
      // 根据选项卡加载不同的数据
      console.log("当前选中的选项卡：", this.tabsCurrent);
      // 重置分页并重新加载数据
      if (this.$refs.paging) {
        this.$refs.paging.reload();
      }
    },

    // 接单操作
    acceptOrder(v) {
      // 保存当前订单信息
      this.currentOrder = v;
      // 重置表单
      this.orderStatus = 1; // 默认已处理
      this.remark = '';
      // 显示弹窗
      this.showModal = true;
    },
    
    // 选择状态
    selectStatus(status) {
      this.orderStatus = status;
    },
    
    // 关闭弹窗
    closeModal() {
      this.showModal = false;
      this.currentOrder = null;
      this.remark = '';
    },
    
    // 点击遮罩关闭弹窗
    closeModalByMask() {
      this.closeModal();
    },
    
    // 确认处理
    confirmHandle() {
      if (!this.currentOrder) return;
      
      // 显示加载提示
      uni.showLoading({
        title: '处理中...',
        mask: true
      });
      
      // 构建请求参数
      const params = {
        id: this.currentOrder.id,
        state: this.orderStatus, // 0未处理，1已处理
        remark: this.remark || ''
      };
      
      console.log('提交参数:', params);
      
      this.$Api.user
        .getOrderaccept(params)
        .then((res) => {
          uni.hideLoading();
          
          console.log('接口返回:', res);
          
          // 根据实际接口返回结构调整判断逻辑
          if (res && res.response && res.response.statusCode === 200) {
            uni.showToast({
              title: "处理成功",
              icon: "success",
              duration: 2000
            });
            // 关闭弹窗
            this.closeModal();
            // 刷新列表
            if (this.$refs.paging) {
              this.$refs.paging.reload();
            } else {
              this.getList();
            }
          } else {
            // 根据实际错误信息显示提示
            const errorMsg = (res && res.data && res.data.message) || 
                           (res && res.response && res.response.message) || 
                           "处理失败";
            uni.showToast({
              title: errorMsg,
              icon: "error",
              duration: 2000
            });
          }
        })
        .catch((error) => {
          uni.hideLoading();
          console.error('处理订单失败:', error);
          
          // 显示具体错误信息
          const errorMsg = (error && error.message) || "网络异常，请重试";
          uni.showToast({
            title: errorMsg,
            icon: "error",
            duration: 2000
          });
        });
    },

    // 显示/隐藏操作菜单
    showActionSheet() {
      this.showDropdown = !this.showDropdown;
    },

    // 跳转到修改密码页面
    goToChangePassword() {
      uni.navigateTo({
        url: "/pages/user/changePassword",
      });
      this.showDropdown = false;
    },

    getList() {
      this.$Api.user
        .getOrderList({
          state: this.tabsCurrent,
        })
        .then((res) => {
          this.list = res.data.data.data;
          console.log(res.data.data.data, "hao d ");
        });
    },

    // 退出登录
    logout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync("USER_INFO");
            this.$Api.user.getlogout({}).then((res) => {
              console.log(res, uni.getStorageSync("USER_INFO").token);
              this.$u.toast("退出成功");

              uni.removeStorageSync("USER_INFO");

              // 跳转到登录页
              uni.reLaunch({
                url: "/pages/login/login",
              });
            });
          }
        },
      });
      this.showDropdown = false;
    },
  },
  // 点击页面其他地方关闭下拉菜单
  onBackPress() {
    if (this.showDropdown) {
      this.showDropdown = false;
      return true;
    }
    return false;
  },
};
</script>

<style lang="scss">
.wait-order-container {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .custom-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background-color: #2b7af8;
    position: relative;
    // padding-top: 45px;
    z-index: 10;

    .navbar-left {
      width: 60px;
    }

    .navbar-title {
      color: #ffffff;
      font-size: 18px;
      font-weight: 500;
      flex: 1;
      text-align: center;
    }

    .navbar-right {
      width: 60px;
      display: flex;
      justify-content: flex-end;
    }
  }

  // 下拉菜单样式
  .dropdown-menu {
    position: absolute;
    right: 10px;
    top: 48px;
    width: 120px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;

    .dropdown-item {
      height: 45px;
      line-height: 45px;
      text-align: center;
      font-size: 14px;
      color: #333;
      border-bottom: 1px solid #f2f2f2;

      &:last-child {
        border-bottom: none;
      }

      &:active {
        background-color: #f8f8f8;
      }
    }
  }

  .tabs-box {
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
    z-index: 10;

    :deep(.u-tabs__wrapper__nav__item) {
      flex: 1 !important;
      padding: 0 !important;
    }
  }

  .order-list {
    padding: 15px;

    .order-item {
      background-color: #ffffff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f5f5f5;
      }

      .order-time {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 14px;

        text {
          margin-left: 5px;
          color: #666;
        }
      }

      .order-status {
        color: #f56c6c;
        font-size: 14px;
      }

      .customer-info {
        padding: 0 0 15px 0;

        .customer-name {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 12px;
          color: #333;
        }

        .info-item {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-bottom: 8px;

          text {
            margin-left: 5px;
            color: #666;
          }
        }
      }

      .order-action {
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #f5f5f5;
        padding-top: 12px;

        .action-btn {
          background-color: #2b7af8;
          color: #ffffff;
          padding: 6px 15px;
          border-radius: 20px;
          font-size: 14px;
        }
      }
    }

    .empty-tip {
      text-align: center;
      padding: 30px 0;
      color: #909399;
      font-size: 14px;
    }
  }
}

/* 自定义弹窗样式 */
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
  
  .modal-content {
    background-color: #ffffff;
    border-radius: 16rpx;
    width: 100%;
    max-width: 600rpx;
    max-height: 80vh;
    overflow: hidden;
    animation: modalShowIn 0.3s ease-out;
  }
  
  .modal-header {
    padding: 30rpx 30rpx 20rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      text-align: center;
    }
  }
  
  .modal-body {
    padding: 30rpx;
    
    .form-group {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .form-label {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
      font-weight: 500;
    }
    
    .status-options {
      display: flex;
      gap: 40rpx;
    }
    
    .status-option {
      display: flex;
      align-items: center;
      gap: 12rpx;
      padding: 20rpx 30rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      flex: 1;
      transition: all 0.3s ease;
      
      &.active {
        border-color: #2b7af8;
        background-color: #f0f7ff;
        
        .radio-circle {
          border-color: #2b7af8;
        }
        
        .status-text {
          color: #2b7af8;
          font-weight: 500;
        }
      }
    }
    
    .radio-circle {
      width: 32rpx;
      height: 32rpx;
      border: 2rpx solid #ccc;
      border-radius: 50%;
      position: relative;
      transition: all 0.3s ease;
    }
    
    .radio-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16rpx;
      height: 16rpx;
      background-color: #2b7af8;
      border-radius: 50%;
    }
    
    .status-text {
      font-size: 28rpx;
      color: #666;
      transition: all 0.3s ease;
    }
    
    .remark-input {
      width: 100%;
      height: 120rpx;
      min-height: 120rpx;
      max-height: 120rpx;
      padding: 20rpx;
      border: 2rpx solid #e0e0e0;
      border-right: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      font-size: 28rpx;
      line-height: 1.4;
      color: #333;
      background-color: #fafafa;
      transition: all 0.3s ease;
      resize: none;
      box-sizing: border-box;
      
      &:focus {
        border-color: #2b7af8;
        border-right-color: #2b7af8;
        background-color: #ffffff;
      }
    }
    
    .char-count {
      display: block;
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 8rpx;
    }
  }
  
  .modal-footer {
    display: flex;
    border-top: 1px solid #f0f0f0;
    
    .btn {
      flex: 1;
      padding: 30rpx;
      text-align: center;
      font-size: 30rpx;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
    }
    
    .cancel-btn {
      color: #666;
      border-right: 1px solid #f0f0f0;
      
      &:active {
        background-color: #f8f8f8;
      }
    }
    
    .confirm-btn {
      color: #ffffff;
      background-color: #2b7af8;
      font-weight: 500;
      
      &:active {
        background-color: #1e68d9;
      }
    }
  }
}

/* 弹窗显示动画 */
@keyframes modalShowIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
</style>
